<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="类别设置"
        left-arrow
        @click-left="$router.go(-1)"
      />
      <!-- 标签按钮区域 -->
      <div class="TabBut">
        <!-- 按钮1即支出,按钮2即收入 -->
        <button @click="tabOne" :class="{ClickBut: tabOneflag}">支出</button>
        <button @click="tabTwo" :class="{ClickBut: tabTwoflag}">收入</button>
      </div>
    </header>
    <div class="content">
      <!-- 按钮相对应的内容区域 -->
      <div class="TabContent">
        <!-- 循环渲染内容 -->
        <!-- 类别支出 -->
        <div v-if="tabFlag">
          <!-- 类别支出,状态为添加的(即点击减少) -->
          <van-row v-for="item in ExpenseIcon_NotClickedAdd" :key="item.iconid">
            <van-col span="2" @click="ExpenseIconReduceFn(item.iconid)">
              <img :src=ReduceIcon alt="" style="height: .21rem;width: .21rem;">
            </van-col>
            <van-col span="20">
              <img :src=item.icon style="height:.33rem;width:.33rem;">
              <span style="margin-left:.15rem;">{{item.title}}</span>
            </van-col>
            <van-col span="2">
              <img :src=SortIcon alt="" style="height:.10rem;width: .20rem;">
            </van-col>
          </van-row>
          <p class="MoreCategory">更多类别</P>
          <!-- 类别支出,状态为减少的(即点击添加) -->
          <van-row v-for="item in ExpenseIcon_NotClickedReauce" :key="item.iconid">
            <van-col span="2" @click="ExpenseIconAddFn(item.iconid)">
              <img :src=AddIcon alt="" style="height: .21rem;width: .21rem;">
            </van-col>
            <van-col span="20">
              <img :src=item.icon style="height:.33rem;width:.33rem;">
              <span style="margin-left:.15rem;">{{item.title}}</span>
            </van-col>
            <van-col span="2">
              <img :src=SortIcon alt="" style="height:.10rem;width: .20rem;">
            </van-col>
          </van-row>
        </div>
        <!-- 类别收入 -->
        <div v-else>
          <!-- 类别收入,状态为添加的(即点击减少) -->
          <van-row v-for="item in RevenueIcon_NotClickedAdd" :key="item.iconid">
            <van-col span="2" @click="RevenueIconReduceFn(item.iconid)">
              <img :src=ReduceIcon alt="" style="height: .21rem;width: .21rem;">
            </van-col>
            <van-col span="20">
              <img :src=item.icon style="height:.33rem;width:.33rem;">
              <span style="margin-left:.15rem;">{{item.title}}</span>
            </van-col>
            <van-col span="2">
              <img :src=SortIcon alt="" style="height:.10rem;width: .20rem;">
            </van-col>
          </van-row>
          <p class="MoreCategory">更多类别</P>
          <!-- 类别收入,状态为减少的(即点击添加) -->
          <van-row v-for="item in RevenueIcon_NotClickedReduce" :key="item.iconid">
            <van-col span="2" @click="RevenueIconAddFn(item.iconid)">
              <img :src=AddIcon alt="" style="height: .21rem;width: .21rem;">
            </van-col>
            <van-col span="20">
              <img :src=item.icon style="height:.33rem;width:.33rem;">
              <span style="margin-left:.15rem;">{{item.title}}</span>
            </van-col>
            <van-col span="2">
              <img :src=SortIcon alt="" style="height:.10rem;width: .20rem;">
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Col, Row, Dialog } from 'vant'
Vue.use(NavBar)
Vue.use(Col)
Vue.use(Row)
export default {
  // 设置data初始值
  data () {
    return {
      my_SetUp: '', // 前一个页面跳转到这个页面中url携带的参数
      // active: 2 // tab标签
      tabFlag: true, // 用户点击按钮切换标签内容,true为支出内容,false为收入内容
      tabOneflag: false, // 用于动态给支出按钮添加class名,初始值为false,触发该按钮相应的点击事件变为true,该按钮就动态添加上class名了
      tabTwoflag: false, // 用于动态给收入按钮添加class名,初始值为false,触发该按钮相应的点击事件变为true,该按钮就动态添加上class名了
      ExpenseIcon_NotClickedAdd: // 支出未被点击图标状态为添加的,请求出来后端的Selection值为1的数据放在这个数组里边
      [],
      ExpenseIcon_NotClickedReauce: // 支出未被点击图标状态为减少的,请求出来后端的Selection值为0的数据放在这个数组里边
      [],
      RevenueIcon_NotClickedAdd: // 收入未被点击图标状态为添加的,请求出来后端的Selection值为1的数据放在这个数组里边
      [],
      RevenueIcon_NotClickedReduce: // 收入未被点击图标状态为减少的,请求出来后端的Selection值为0的数据放在这个数组里边
      [],
      AddIcon: require('../../../lib/img/CategorySettings/Add.png'),
      ReduceIcon: require('../../../lib/img/CategorySettings/Reduce.png'),
      SortIcon: require('../../../lib/img/CategorySettings/Sort.png')
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // 获取到url地址栏中的参数
    this.my_SetUp = this.$route.query.my_SetUp
    // console.log(this.my_SetUp)
    // // 根据url中的参数点击的是哪个这边就显示的是哪一个的标签内容
    if (this.my_SetUp === '支出') {
      this.tabOneflag = true
      this.tabTwoflag = false
      this.tabFlag = true
    } else if (this.my_SetUp === '收入') {
      this.tabOneflag = false
      this.tabTwoflag = true
      this.tabFlag = false
    } else { // 如果地址栏没有参数,则默认显示支出的内容
      // 进入页面后默认加载按钮1即支出按钮对应的内容
      this.tabFlag = true // 默认内容1
      this.tabOneflag = true // 默认添加按钮1样式
    }
    // axios请开发模式下请求本地json数据(类别设置支出图标)
    // axios({
    //   method: 'get',
    //   url: '/data/ExpenseIcon_NotClicked.json'
    // }).then(res => {
    //   // console.log(res)
    //   res.data.map((item, index) => {
    //     if (item.Selection === 1) {
    //       this.ExpenseIcon_NotClickedAdd.push(item)
    //     } else {
    //       this.ExpenseIcon_NotClickedReauce.push(item)
    //     }
    //   })
    // })
    // // axios请开发模式下请求本地json数据(类别设置收入图标)
    // axios({
    //   method: 'get',
    //   url: '/data/RevenueIcon_NotClicked.json'
    // }).then(res => {
    //   // console.log(res)
    //   res.data.map((item, index) => {
    //     if (item.Selection === 1) {
    //       this.RevenueIcon_NotClickedAdd.push(item)
    //     } else {
    //       this.RevenueIcon_NotClickedReduce.push(item)
    //     }
    //   })
    //   // console.log(this.RevenueIcon_NotClickedAdd)
    //   // console.log(this.RevenueIcon_NotClickedReduce)
    // })
    // 调用axios请求后端接口图标数据的函数
    this.requestIcon()
  },
  // 计算属性
  methods: {
    // 点击支出按钮,切换为支出内容,true显示按钮1对应的内容1
    tabOne () {
      this.tabFlag = true // 切换按钮对应的标签内容
      this.tabOneflag = true // 动态给按钮1添加class
      this.tabTwoflag = false // 动态去掉按钮2的class,以防点击1的时候2的class也存在,这样的话样式就乱了
    },
    // 点击收入按钮,切换为收入内容,false显示按钮2对应的内容2
    tabTwo () {
      this.tabFlag = false
      this.tabOneflag = false // 动态去掉按钮1的class
      this.tabTwoflag = true // 动态给按钮2添加class
    },
    // 以下四个功能
    // 支出类别中,状态由增加变为减少
    ExpenseIconReduceFn (id) {
      // 由当类别id值请求后端更改当前状态的接口,由id值更改状态,最后重新请求数据,重新渲染就可完成操作
      Dialog.confirm({
        title: '警告',
        message: '删除类别会同时删除该类别下的所有记账'
      }).then(() => {
        // on confirm
        // console.log('更改状态', id)
        // 调用请求更改当前状态的函数并传参
        this.changeIcon(id, 0)
      }).catch(() => {
        // on cancel
      })
    },
    // 支出类别中,状态由减少变为增加
    ExpenseIconAddFn (id) {
      // 由当类别id值请求后端更改当前状态的接口,由id值更改状态,最后重新请求数据,重新渲染就可完成操作
      // console.log('更改状态', id)
      // 调用请求更改当前状态的函数并传参
      this.changeIcon(id, 1)
    },
    // 收入类别中,状态由增加变为减少
    RevenueIconReduceFn (id) {
      // 由当类别id值请求后端更改当前状态的接口,由id值更改状态,最后重新请求数据,重新渲染就可完成操作
      Dialog.confirm({
        title: '警告',
        message: '删除类别会同时删除该类别下的所有记账'
      }).then(() => {
        // on confirm
        // console.log('更改状态', id)
        // 调用请求更改当前状态的函数并传参
        this.changeIcon(id, 0)
      }).catch(() => {
        // on cancel
      })
    },
    // 收入类别中,状态由减少变为增加
    RevenueIconAddFn (id) {
      // 由当类别id值请求后端更改当前状态的接口,由id值更改状态,最后重新请求数据,重新渲染就可完成操作
      // console.log('更改状态', id)
      // 调用请求更改当前状态的函数并传参
      this.changeIcon(id, 1)
    },
    // 封装一个更改图标状态的函数
    changeIcon (iconid, Selection) {
      axios({
        method: 'get',
        url: 'http://60.205.153.211:3000/api/lazypigIcon/updataIcon',
        params: {
          userid: localStorage.getItem('lazypiguserid'),
          iconid,
          Selection
        }
      }).then((res) => {
        // console.log(res)
        if (res.data.code === '200') {
          this.requestIcon()
        }
      })
    },
    // 封装一个请求图标的函数
    requestIcon () {
      axios({
        method: 'get',
        url: 'http://60.205.153.211:3000/api/lazypigIcon/lookupIcon',
        params: {
          userid: localStorage.getItem('lazypiguserid')
        }
      }).then((res) => {
        // 所有的数据在请求或者是重新请求以前都要先把原先数组内的数据清空再请求
        this.ExpenseIcon_NotClickedAdd.length = 0
        this.ExpenseIcon_NotClickedReauce.length = 0
        this.RevenueIcon_NotClickedAdd.length = 0
        this.RevenueIcon_NotClickedReduce.length = 0
        res.data.ExpenseNotClicked.map((item, index) => {
          if (item.Selection === '1') {
            // 状态为1
            this.ExpenseIcon_NotClickedAdd.push(item)
          } else {
            // 状态为0
            this.ExpenseIcon_NotClickedReauce.push(item)
          }
        })
        // 收入未被点击
        res.data.RevenueNotClicked.map((item, index) => {
          if (item.Selection === '1') {
            this.RevenueIcon_NotClickedAdd.push(item)
          } else {
            this.RevenueIcon_NotClickedReduce.push(item)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  // 标签按钮区域
  .TabBut {
    height: .35rem;
    width: 100%;
    background-color: #FDD949;
    text-align: center;
    button {
      width: 1.25rem;
      height: .20rem;
      border: 1px solid #25231e;
      border-radius: .05rem;
      background-color: #FDD949;
      font-size: .15rem;
    }
    // 点击相对应的按钮添加的相对应的class
    .ClickBut {
      background-color: #1c1c1c;
      color: #FDD949;
    }
  }
  .content {
    // 按钮相对应的标签内容区域
    .TabContent {
      height: 100%;
      overflow: auto;
      // 每一个行
      /deep/ .van-row {
        margin: 0 .02rem;
        border-top: .005rem solid #fbfbfb;
        border-bottom: .005rem solid #fbfbfb;
        // 每一列
        /deep/ .van-col {
          height: .49rem;
          // background-color: #f66;
          line-height: .49rem;
        }
      }
    }
    // 更多类别p标签
    .MoreCategory {
      line-height: .50rem;
    }
  }
</style>
